<template>
  <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true"
             v-dialogDrag>
    <el-form ref="form" :rules="rules" :model="formEvent" label-width="120px" :size="size">
      <el-row :gutter="16">
        <!-- 通过调整lg的大�?  12 24/3=12 会变为一�?3�? -->
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="消缺工单名称" prop="gdmc">
            <el-input v-model="formEvent.gdmc" placeholder="会自动生成,请填写其他选项" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="单位" prop="xqdwmc">
            <el-input v-model="formEvent.xqdwmc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="消缺站点" prop="xqdwmc">
            <el-input v-model="formEvent.xqzdTypeName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="formEvent.xqzdType === '0'" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="能源站" prop="xqdwmc">
            <el-input v-model="formEvent.ssjfmc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="formEvent.xqzdType === '1'" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="库房" prop="xqdwmc">
            <el-input v-model="formEvent.sskfmc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="计划开始时间" prop="jhkssj">
            <el-date-picker v-model="formEvent.jhkssj" type="datetime" style="width:100%"
                            placeholder="请选择计划开始时间"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" disabled>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="计划结束时间" prop="jhjssj">
            <el-date-picker v-model="formEvent.jhjssj" type="datetime" style="width:100%"
                            placeholder="请选择计划结束时间"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" disabled>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="创建人" prop="createPersonName">
            <el-input v-model="formEvent.createPersonName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="formEvent.createTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="消缺主要内容" prop="xqnr">
            <el-input v-model="formEvent.xqnr" placeholder="请填写巡视内容" clearable type="textarea" disabled>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 主键是不可以编辑的，不可查看�? -->
      <el-input v-model="formEvent.id" v-show="false"></el-input>
      <div>
        <h3 style="color:#009688;">消缺隐患明细</h3>
      </div>
      <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
      <vxe-table border stripe ref="selectedEquip" height="300" :data="list.data">
        <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
        <vxe-column field="unitName" title="单位名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="defectName" title="缺陷隐患名称" align="center" minWidth="150">
          <template v-slot="{ row }">
            <span style="color:#0000FF ;cursor: pointer;" @click="handleBaseInfo(row)">{{ row.defectName }}</span>
          </template>
        </vxe-column>
        <vxe-column field="handleTaskName" title="消缺工单名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="taskSourceName" title="数据来源" align="center" minWidth="150"></vxe-column>
        <vxe-column field="equipDefectTypeName" title="问题分类" align="center" minWidth="150"></vxe-column>
        <vxe-column field="creator" title="发现人" align="center" minWidth="150"></vxe-column>
        <!-- <vxe-column field="teamName" title="发现班组" align="center" minWidth="150"></vxe-column> -->
        <vxe-column field="createTime" title="发现日期" align="center" minWidth="180"></vxe-column>
        <vxe-column field="defectParts" title="缺陷隐患部位" align="center" minWidth="150"></vxe-column>
        <vxe-column field="defectAddress" title="缺陷隐患地址" align="center" minWidth="150"></vxe-column>
        <vxe-column field="defectDescription" title="详细描述" align="center" minWidth="150"></vxe-column>
        <vxe-column field="equipName" title="设备名称" align="center" minWidth="150"></vxe-column>
        <!-- <vxe-column field="ccbm" title="出厂编码" align="center" minWidth="150"></vxe-column> -->
        <vxe-column field="equipTypeName" title="设备类型" align="center" minWidth="150"></vxe-column>
        <vxe-column field="taskName" title="任务名称" align="center" minWidth="150"></vxe-column>
      </vxe-table>
      <!-- v-show="!isDisabled" -->
      <div>
        <h3 style="color:#009688;">派单信息</h3>
      </div>
      <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
      <el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="派单人" prop="pdPersonName">
            <el-input v-model="formEvent.pdPersonName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="!isDisabled" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="派单人电话" prop="pdrTel">
            <el-input v-model="formEvent.pdrTel"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-else :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="派单人电话" prop="pdrTel">
            <el-input disabled v-model="formEvent.pdrTel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="派单时间" prop="pdrTime">
            <el-date-picker v-model="formEvent.pdrTime" type="datetime" style="width:100%"
                            placeholder="请选择计划开始时间"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" disabled>
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <baseInfo ref="baseInfo"></baseInfo>
    <span v-show="!isDisabled" slot="footer" class="dialog-footer">
      <el-button @click="handleCancel()" size="medium" icon="fa fa-minus-square-o">取消</el-button>
      <el-button type="primary" @click="handleSubmit()" size="medium" icon="fa fa-save (alias)">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {FormEvent} from "../model/workOrderManagement-form.js";
import {reactive} from "vue";
import {workOrderManagement} from '@/api/defects/workOrderManagement.js'
import baseInfo from "./baseInfo.vue"
import {getInfo} from "@/api/login";
import moment from "moment";

export default {
  name: "preparationTaskForm",
  props: {
    formData: {
      type: Object,
    },
  },
  components: {baseInfo},
  data() {
    return {
      dialogProps: {
        visible: false,
        title: "派单",
        width: "70%",
        top: "5px",
      },
      size: "small",
      formEvent: reactive(FormEvent).form,
      // rules: reactive(FormEvent).rules,
      periodShow: false,
      taskNoShow: false,
      list: {
        data: [],
        pageNo: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        total: 0,
      },
      pagerShow: false,
      isEdit: false,
      isDisabled: false,
      row: {}


    };
  },
  computed: {
    rules() {
      const obj = {
        pdrTel: "",
        xqbzbm: ""
      }
      const fields = Object.keys(obj)
      const rules = {}
      fields.forEach(d => {
        rules[d] = [
          {required: true, message: '不能为空',}

        ]
      })
      rules.pdrTel = [
        {required: true, message: '派单人电话不能为空'},
        {validator: this.validationPart4, trigger: ['blur', 'change']}

      ]


      return rules
    }
  },
  mounted() {

  },
  methods: {
    // validationPart(rule, value, callback) {
    //   if (this.formEvent.jhkssj > this.formEvent.jhjssj) {
    //     callback()
    //   } else {
    //     callback(new Error('开始时间必须小于结束时间'))
    //   }
    // },
    validationPart4(rule, value, callback) {

      let moblie = /^1(3|4|5|6|7|8|9)\d{9}$/
      let tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/
      if (moblie.test(this.formEvent.pdrTel) || tel.test(this.formEvent.pdrTel)) {
        callback()
      } else {
        callback(new Error('请输入正确合规的手机号码或者座机号码(区号-座机号码)'))
      }
    },
    validationPart1(rule, value, callback) {

      if (this.formEvent.jhkssj < this.formEvent.jhjssj) {
        callback()
      } else {
        callback(new Error('结束时间必须大于开始时间'))
      }
    },
    validationSpace(rule, value, callback) {
      if (this.formEvent.xqnr.trim().length !== 0) {
        callback()
      } else {
        callback(new Error('不能输入空格'))
      }
    },
    showDialog(isEdit, row, isDisabled) {
      console.log(isEdit, row, isDisabled)
      this.isEdit = isEdit || false
      this.isDisabled = isDisabled || false
      this.dialogProps.title = this.isDisabled ? '工单详情' : '派单'
      this.row = row.row || {}
      this.dialogProps.visible = true
      if (isEdit) {
        this.initData()
      } else {
        if (isDisabled) {
          this.initData()
        }
      }
    },
    getTable() {
      workOrderManagement.getTaskEquipList(this.row.id).then(res => {
        this.list.data = res.data
        this.list.total = res.data.length
      }).catch(err => {
      })
    },
    initData() { 		//初始化表单信�?//
      for (let key in this.formEvent) {
        this.formEvent[key] = this.row[key];
      }
      getInfo().then(res => {
        this.formEvent.pdPerson = res.user.userId
        this.formEvent.pdPersonName = res.user.nickName
        this.formEvent.pdrTime = moment().format("YYYY-MM-DD HH:mm:ss")
      })
      this.getTable()
    },
    handleBaseInfo(row) {
      this.$refs.baseInfo.showDialog(false, row)
    },
    //确定
    handleSubmit() {


      const api = this.isEdit ? 'sendOrder' : 'insertData'
      const label = this.isEdit ? '派单' : '新增'

      this.$refs.form.validate((valid) => {
        if (valid) {
          const queryParam = Object.assign({}, this.formEvent)

          const params = {
            ...queryParam,
            taskEquipVoList: this.list.data
          }
          workOrderManagement[api]([params]).then(res => {
            if (res.code === '200') {
              this.$message.success(label + '成功')
              this.handleCancel()
              this.$emit('onSearch')
              this.dialogProps.visible = false;
            }
          })
        } else {
          return false;
        }
      });

    },
    //取消
    handleCancel() {
      this.$refs.form.resetFields()
      for (let key in this.formEvent) {
        this.formEvent[key] = "";
      }
      this.formEvent.stockType = []
      this.list = {
        data: [],
      }
      this.row = {}
      this.dialogProps.visible = false;
    },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      this.handleCancel()
      this.dialogProps.visible = false;
      // })
      // .catch((_) => { });
    },
  },
};
</script>

<style scoped>
.tool-button-container {
  text-align: right;
}

.el-select {
  width: 100% !important
}
</style>
